<template>
  <div class="qr_code">
    <el-form class="mb20" :model="searchForm" label-width="80px" size="small" inline>
      <el-form-item label="商户编号">
        <el-input placeholder="输入商户编号" v-model="searchForm.merchant_num"></el-input>
      </el-form-item>
      <el-form-item label="门店名称">
        <el-select filterable clearable placeholder="全部" v-model="searchForm.store_id">
          <el-option v-for="item in stroes" :value="item.id" :label="item.store_name" :key="item.id">{{ item.store_name }}</el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="导出状态">
        <el-select clearable filterable placeholder="全部" v-model="searchForm.qr_status">
          <el-option :value="0" label="未导出">未导出</el-option>
          <el-option :value="1" label="已导出">已导出</el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item label="创建时间">
        <el-date-picker type="daterange" start-placeholder="开始时间" end-placeholder="结束时间" value-format="yyyy-MM-dd" v-model="searchForm.time" @change="handleStartTime"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" type="success" size="small" @click="handleSearch">查询</el-button>
      </el-form-item>
    </el-form>
    <el-row>
      <el-table size="small" :data="code_data" v-loading="loading">
        <el-table-column align="center" label="序号" type="index"></el-table-column>
        <el-table-column align="center" label="商户编号" prop="merchant_num"></el-table-column>
        <!-- <el-table-column align="center" label="公司名称" prop="store_name"></el-table-column>
        <el-table-column align="center" label="绑定时间" prop="create_at"></el-table-column>
        <el-table-column align="center" label="绑定状态" prop="create_at"></el-table-column> -->
        <el-table-column align="center" label="门店名称" prop="store_name"></el-table-column>
        <el-table-column align="center" label="所属商户" prop="full_name"></el-table-column>
        <el-table-column align="center" label="所属代理商" prop="agent_name"></el-table-column>
        <el-table-column align="center" label="创建时间" prop="create_at"></el-table-column>
        <!-- <el-table-column align="center" label="导出状态">
          <template slot-scope="scope">
            <span :class="scope.row.qr_status === 0 ? 'tip' : ''">{{ scope.row.qr_status === 0 ? '未导出' : '已导出' }}</span>
          </template>
        </el-table-column> -->
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="Down(scope.row.store_id, scope.row.store_name, scope.row.qrcode)">二维码导出</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <el-pagination :total="page.total" :current-page.sync="page.current" layout="total, prev, pager, next, jumper"  class="fr mt20" @current-change="handleCurrentChange" :page-size="page.pageSize"></el-pagination>
      <el-dialog title="二维码导出" :visible.sync="codeBox" width="650px">
        <dialog-body v-if="codeBox" :id="imgId" :name="imgName" :code="qrcode" ref="codeBody"></dialog-body>
        <div slot="footer">
          <el-button size="small" type="primary" @click="ImgDown">确认导出</el-button>
        </div>
      </el-dialog>
    </el-row>
  </div>
</template>

<script>
import dialogBody from './code-down'
import { qrListInit, handleStoreList, handleQrListSearch, handleQrListPage } from '@/api/shop'
import { mapGetters } from 'vuex'

export default {
  components: {
    dialogBody
  },
  data() {
    return {
      qrcode_item: {
        quantity: 0,
        style: 1,
        logo: []
      },
      multipleSelection: [],
      imgId: null,
      imgName: null,
      qrcode: null,
      codeBox: false,
      loading: false,
      qcShow: false,
      batch_data: [],
      code_data: [],
      batch_page: {
        total: 0,
        pageSize: 0,
        current: 1
      },
      page: {
        total: 0,
        pageSize: 0,
        current: 1
      },
      searchForm: {
        merchant_num: '',
        store_id: '',
        qr_status: '',
        time: []
      },
      stroes: []
    }
  },
  methods: {
    init() {
      handleStoreList(this.id).then(response => {
        this.stroes = response.data.result
      })
    },
    Down(id, name, qrcode) {
      this.codeBox = true
      this.imgId = id
      this.imgName = name
      this.qrcode = qrcode
    },
    ImgDown() {
      this.$refs.codeBody.imgDown()
    },
    handleCurrentChange(v) {
      this.loading = true
      handleQrListPage(this.id, v, this.searchForm).then(response => {
        this.code_data = response.data.result.data
        this.page.total = response.data.result.total
        this.loading = false
      })
    },
    handleSearch() {
      this.loading = true
      handleQrListSearch(this.id, this.searchForm).then(response => {
        this.code_data = response.data.result.data
        this.page.current = response.data.result.current_page
        this.page.total = response.data.result.total
        this.loading = false
      })
    },
    handleStartTime(v) {
      this.searchForm.start = v
    },
    handleEndTime(v) {
      this.searchForm.end = v
    },
    qCAddShow() {
      this.qcShow = true
      this.qrcode_item = {
        quantity: '',
        style: 1,
        logo: []
      }
    }
  },
  computed: {
    ...mapGetters([
      'id'
    ])
  },
  created() {
    this.init()
    qrListInit(this.id).then(Response => {
      if (Response.data.errorCode === 0) {
        this.loading = true
        this.code_data = Response.data.result.data
        this.page.total = Response.data.result.total
        this.page.pageSize = Response.data.result.per_page
        this.loading = false
      } else {
        this.$message.error(Response.data.errorMsg)
      }
    })
  }
}
</script>

<style lang="scss" scpoed>
.qr_code{
  .el-dialog__body{
    .el-row{
      span{
        font-size: 12px;
      }
      margin-bottom: 10px;
      .el-radio+.el-radio{
        margin-left: 5px;
      }
      .el-checkbox-group{
        display: inline-block;
        vertical-align: top;
        margin: 0;
        padding: 0;
        label{
          display: block;
          margin-left: 0;
        }
      }
    }
    .box-body{
      &>div{
        display: inline-block;
        vertical-align: top;
        p{
          margin: 0;
        }
        &:last-child{
          margin-left: 30px;
        }
      }
    }
  }
}
  
</style>
